<template>
	<view class="content">
		<view v-if="status && paymentInfo.status === 2">
			<view
				style="display: flex;justify-content: space-between;align-items: center;padding: 46rpx 57rpx 45rpx 67rpx;margin: 20rpx 30rpx;border-radius: 20rpx;background: #202226;">
				<view>
					<view style="font-size: 40rpx;font-weight: bold;color: #fff;margin-bottom: 10rpx;">交易成功</view>
					<view style="font-size: 24rpx;color: #fff;">
						您购买的商品已付款成功
					</view>
				</view>
				<image src="/static/image/win.png" style="width: 131rpx;height: 141rpx;" mode=""></image>
			</view>
			<view
				style="justify-content: space-between;display: flex;align-items: center;padding: 20rpx;margin: 0 30rpx;border-radius: 20rpx;background: #202226;">
				<view style="display: flex;">
					<image src="/static/dw.png" style="width: 24rpx;height: 29rpx;margin-top: 6rpx;margin-right: 10rpx;"
						mode=""></image>
					<view style="width: 437rpx;">
						<view style="font-size: 27rpx;color: #fff;margin-bottom: 14rpx;">
							{{data.ship_area_name + data.ship_address}}
						</view>
						<view style="font-size: 27rpx;color: #b9b9b9;">
							{{data.ship_name}} {{data.ship_mobile}}
						</view>
					</view>
				</view>
				<image src="/static/image/next.png" style="width: 13rpx;height: 25rpx;" mode=""></image>
			</view>
			<view style="padding:20rpx;margin: 20rpx 30rpx;border-radius: 20rpx;background: #202226;">
				<view style="display: flex;border-bottom: 1rpx solid #D4D4D4FF;padding-bottom: 20rpx;"
					v-for="A,B in data.items" :key="B">
					<image :src="A.image_url"
						style="width: 216rpx;height: 216rpx;border-radius: 20rpx;margin-right: 20rpx;" mode=""></image>
					<view style="flex: 1;">
						<view
							style="font-size: 24rpx;color: #fff;margin-bottom: 16rpx;max-height:71rpx;line-height: 38rpx;overflow: hidden;">
							{{A.name}}
						</view>
						<view style="color: #b9b9b9;font-size: 24rpx;margin-bottom: 36rpx;">
							{{A.addon}}
						</view>
						<view style="display: flex;align-items: center;justify-content: space-between;">
							<view style="color: #F2D7AAFF;font-weight: bold;font-size: 36rpx;">
								<text style="font-size: 24rpx;">￥</text>{{A.amount}}
								<text v-show="A.buypoint > 0">+{{A.buypoint}}购物积分</text>
							</view>
							<view style="color: #F2D7AAFF;font-weight: bold;font-size:28rpx;">
								x{{A.nums}}
							</view>
						</view>
					</view>
				</view>
				<view style="display: flex;align-items: center;justify-content: space-between;margin-top: 19rpx;">
					<view style="font-size: 24rpx;color: #fff;">
						买家留言
					</view>
					<view style="color: #999999FF;font-size: 24rpx;">
						{{data.memo || '无'}}
					</view>
				</view>
			</view>
			<view style="padding: 20rpx;margin: 20rpx 30rpx;background: #202226;border-radius: 20rpx;">
				<view style="font-size: 28rpx;font-weight: bold;color: #fff;margin-bottom: 20rpx;">
					订单明细
				</view>
				<view style="font-size: 24rpx;color: #b9b9b9;">
					<view
						style="display: flex;align-items: center;justify-content: space-between;margin-bottom: 10rpx;">
						<view>
							订单号
						</view>
						<view>
							{{data.order_id}}
						</view>
					</view>
					<view style="display: flex;align-items: center;justify-content: space-between;">
						<view>
							付款时间
						</view>
						<view>
							{{time(data.payment_time)}}
						</view>
					</view>
				</view>
			</view>
			<view style="padding: 20rpx;margin: 20rpx 30rpx;background: #202226;border-radius: 20rpx;">
				<view style="font-size: 28rpx;font-weight: bold;color: #fff;margin-bottom: 20rpx;">
					价格明细
				</view>
				<view style="font-size: 24rpx;color: #b9b9b9;">
					<view style="display: flex;align-items: center;justify-content: space-between;">
						<view>
							商品总价
						</view>
						<view>
							￥{{data.goods_amount}}<text v-show="data.buypoint > 0">+{{data.buypoint}}购物积分</text>
						</view>
					</view>
					<view style="display: flex;align-items: center;justify-content: space-between;" v-show="data.zeng_point > 0">
						<view>
							获得积分
						</view>
						<view>
							{{data.zeng_point}}
						</view>
					</view>
					<view style="display: flex;align-items: center;justify-content: space-between;">
						<view>
							合计
						</view>
						<view style="color: #F2D7AAFF;">
							￥{{data.order_amount}}<text v-show="data.buypoint > 0">+{{data.buypoint}}购物积分</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="result fail" v-else-if="status && paymentInfo.status === 1">
			<image class="result-img" src="/static/image/pastdue.png" mode=""></image>
			<view class="result-top">支付失败</view>
			<view class="result-mid red-price">{{ paymentInfo.money || '' }}</view>
			<view class="result-bot"><button class="btn btn-g" @click="orderDetail()">查看详情</button></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				paymentId: 0,
				paymentInfo: {}, // 支付单详情
				orderId: 0,
				status: false,
				data: {}
			};
		},
		onLoad(options) {
			if (options.id) {
				this.paymentId = options.id;

			}
			if (options.oid) {
				this.orderId = options.oid;
				this.getdata(options.oid)
			}

		},
		mounted() {
			this.getPaymentInfo();
		},
		methods: {
			time(e) {
				const date = new Date(e * 1000)
				const year = date.getFullYear()
				const month = date.getMonth() + 1; // 获取月份，注意要加 1，范围是 0-11
				const day = date.getDate(); // 获取日期
				const hour = date.getHours(); // 获取小时
				const minute = date.getMinutes(); // 获取分钟
				const second = date.getSeconds(); // 获取秒钟
				const formattedTime =
					`${year}-${month < 10 ? '0' + month : month}-${day < 10 ? '0' + day : day} ${hour < 10 ? '0' + hour : hour}:${minute < 10 ? '0' + minute : minute}:${second < 10 ? '0' + second : second}`;
				return formattedTime
			},
			getdata(e) {
				this.$api.orderDetail({
					order_id: e
				}, res => {
					console.log(res);
					this.data = res.data
				})
			},
			getPaymentInfo() {
				if (!this.paymentId) {
					this.status = true;
					this.paymentInfo.money = '0.00';
					this.paymentInfo.status = 2;
					this.paymentInfo.type = 1;

					return;
				}
				let data = {
					payment_id: this.paymentId
				};

				this.$api.paymentInfo(data, res => {
					if (res.status) {
						let info = res.data;
						if (info.payment_code === 'alipay') {
							info.payment_name = '支付宝支付';
						} else if (info.payment_code === 'wechatpay') {
							info.payment_name = '微信支付';
						} else if (info.payment_code === 'balancepay') {
							info.payment_name = '余额支付';
						}

						// 获取订单号
						if (info.rel.length) {
							for (let i = 0; i < info.rel.length; i++) {
								if (info.rel[i].source_id) {
									this.orderId = info.rel[i].source_id;
									break;
								}
							}
						}
						this.status = true;
						this.paymentInfo = info;
					} else {
						this.$common.errorToShow(res.msg);
					}
				});
			},
			orderDetail() {
				if (this.orderId && this.paymentInfo.type === 1) {
					this.$common.redirectTo('/pages/member/order/orderdetail?order_id=' + this.orderId);
				} else if (this.paymentInfo.type === 2) {
					this.$common.redirectTo('/pages/member/balance/details');
				} else if (this.paymentInfo.type === 5 || this.paymentInfo.type === 6) {
					uni.navigateTo({
						url: '/pages/index/index'
					});
				}
			}
		}
	};
</script>

<style>
	.result {
		text-align: center;
		padding-top: 200upx;
	}

	.result-img {
		width: 140upx;
		height: 140upx;
		margin-bottom: 20upx;
	}

	.result-num {
		color: #666;
		font-size: 30upx;
		margin-bottom: 20upx;
	}

	.result-top {
		color: #666;
		font-size: 30upx;
		margin-bottom: 20upx;
	}

	.result-mid {
		margin-bottom: 60upx;
	}

	.result-bot .btn {
		margin-top: 40upx;
		font-size: 26upx;
		padding: 0 50upx;
	}
</style>